<template>
  <view class="index-page">
    <u-navbar
      title="消息中心"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <u-tabs
      :list="state.olist"
      bg-color="transparent"
      active-color="#fffeff"
      inactive-color="#909a9d"
      item-width="25%"
      v-model="state.tabCurrent"
      @change="change"
    ></u-tabs>
    <scroll-view
      class="scrool"
      :style="{ height: 'calc(100% - 180rpx)' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view
        class="wrap"
        v-for="(item, index) in state.list"
        :key="index"
        @click="article(item.id)"
      >
        <view class="center">
          <u-icon
            name="volume-up-fill"
            color="#fff"
            style="margin-right: 30rpx"
          ></u-icon>
          <view> {{ item.name }}</view>
        </view>
        <view class="bottom">{{ item.createtime }}
			<text class="read" v-if="item.read_status==1">{{ item.read_status_text }}</text>
			<text class="noread" v-if="item.read_status==0">{{ item.read_status_text }}</text>
		</view>
        <u-divider></u-divider>
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { getArticleList } from '@/api/modules/user'
const state = reactive({
  olist: [
    {
      name: '全部'
    },
    {
      name: '上新公告'
    },
    {
      name: '合成公告'
    },
    {
      name: '运营公告'
    }
  ],
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0
})
//点击文章
const article = (id: string) => {
  uni.navigateTo({
    url: `/pages/my/message-center/details?id=${id}`
  })
}

//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  let status = state.tabCurrent === 0 ? 'all' : '1' + String(state.tabCurrent)

  getArticleList({
    page: state.page,
    page_size: 30,
    type: status
  }).then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 30) state.status = 'nomore'
    else state.status = 'loading'
  })
}
bottomOut()

//
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  bottomOut()
}
</script>
<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.wrap {
  position: relative;
  padding: 0 30rpx;

  .center {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx 0 20rpx;
    color: #fff;
    font-size: 32rpx;
  }
  .bottom {
    margin: 20rpx 20rpx 20rpx 80rpx;
    color: #8f8f8f;
    .read {
      border: 1px solid greenyellow;
      padding: 1rpx 10rpx;
      border-radius: 10rpx;
      margin-left: 10rpx;
	  color:greenyellow;
    }
	.noread{
		border: 1px solid #ddd;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
  }
}

.index-page {
  height: 100%;
}
</style>
